﻿@{
    ViewBag.Title = "SS_BooksDemo";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    .box {
        border: 1px dashed #008000;
        position: relative;
        margin-bottom: 20px;
    }

    .box > div {
        position: absolute;
        width: 100px;
        height: 130px;
        border: 1px solid #008000;
    }

    .box > .ss-placeholder-child {
        background: transparent;
        border: 1px dashed blue;
    }
</style>

<script src="/JS/MyPlugin/jquery.shapeshift.min.js" type="text/javascript"></script>
<script src="/JS/MyPlugin/jquery.touch-punch.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".box").shapeshift();

        var elems = $(".box img");
        for (var i = 0; i < elems.length; i++) {
            ZEUS.DEBUG.log("Width: " + elems[i].style.width + " Height: " + elems[i].style.height + " Src: " + elems[i].src);
        }
    })
</script>

<h2>ShapeShift Books Demo</h2>

<div class="box">
    <div><img src="/Images/books/android.jpg" style="width:100px;height:130px;" /></div>
    <div><img src="/Images/books/android_opengl.jpg" style="width:100px;height:130px;" /></div>
    <div><img src="/Images/books/cocos2d-x.jpg" style="width:100px;height:130px;" /></div>
</div>

<div class="box">
    <div><img src="/Images/books/hadoop.jpg" style="width:100px;height:130px;" /></div>
    <div><img src="/Images/books/ios7.jpg" style="width:100px;height:130px;" /></div>
    <div><img src="/Images/books/ios_game.jpg" style="width:100px;height:130px;" /></div>
</div>

<div class="box">
    <div><img src="/Images/books/ios7_game.jpg" style="width:100px;height:130px;" /></div>
    <div><img src="/Images/books/ios_graphic.jpg" style="width:100px;height:130px;" /></div>
    <div><img src="/Images/books/ruby.jpg" style="width:100px;height:130px;" /></div>
</div>

<div class="box">
    <div></div>
</div>